<template>
    <div class="box-cinemas">
        <div>
            <van-nav-bar title="影院" ref="navbar" @click-left="barleft()" @click-right="barright()">
                <template #left>
                    <!-- 利用vuex 实现在地区索引栏indexBer.vue中的地区选择-->
                    <span>{{$store.state.citiesName}}</span>
                   <van-icon name="arrow-down" />
                </template>
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <cinema-data :cinemasList="this.$store.state.cinemas" :height="height"></cinema-data>
    </div>
</template>

<script>
import cinemaData from './cinemaData.vue'

// 更好的滚动效果
import BetterScroll from 'better-scroll'

export default {
  components: { cinemaData },
    data() {
        return {
            // cinemas: null,
            // 无序列表的高度，应用于.bianduan
            height: ''
        }
    },
    methods: {
        onClickLeft() {
            Toast('返回');
        },
        onClickRight() {
            Toast('按钮');
        },
        barleft(){
            // console.log(123);
            this.$router.push('/verted/indexbar')
        },
        barright(){
            this.$router.push('/verted/search')
        },
        slider(){
            // 等到DOM创建完成后执行  --让滑动更加顺畅
            this.$nextTick(() => {
                new BetterScroll('.bianduan',{
                    scrollbar:{
                        fade: true          // 显示出滚动条
                    }
                })
            })  
        }
    },
    mounted(){
        // 计算最外围box的高度(verted.vue中) 减 导航栏高度   
        // console.log(document.querySelector('#box-h').offsetHeight);
        this.height = document.querySelector('#box-h').offsetHeight-
            this.$refs.navbar.$el.offsetHeight-
            document.querySelector('#nav-h').offsetHeight+'px';
        // console.log(this.height);
         
        // 判断是否是第一次请求或者更换了城市
         if(this.$store.state.changeCity){
            // 利用vuex的封装异步获取数据
            this.$store.dispatch("getChinemaData").then(ref=>{
                this.slider();
            })
         }else{
            console.log("影院--使用缓存成功");
            this.slider();
         }
         
    }
}
</script>

<style lang="scss" scoped>
    .box-cinemas{
        width: 100%;
        height: 100%;
    }
    // 这个。变短样式是为了契合 BetterScroll 而设计的；不要的话要在box-cinemas上加上 overflow: hidden;
    .bianduan{
        // height: 100%;
        overflow: hidden;
        position: relative;
    }
    .cinema-list {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            height: 42px;
            position: relative;
            background-color: #fff;
            padding: 15px;
            // display: flex;
            // justify-content: space-between;
        }
        .left{
            width: calc(100% - 65px);
            width: 15rem;
            text-align: left;
            // padding-right: 18px;
            float: left;
            .cinema-name {
                color: #191a1b;
                font-size: 15px;
                // float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .cinema-address {
                color: #797d82;
                font-size: 15px;
                margin-top: 5px;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .right{    
            width: 80px;
            text-align: center;
            float: right;
            margin-right: -5px;
            position: absolute;
            right: 1rem;
            .price-fmt {
                font-size: 17px;
                color: #ff5f16;
                height: 0 !important;
                display: inline-table !important;
            }
        }
    }
</style>